<template>
	<div class="operLog-page">
		<!--查询表单-->
		<el-card class="box-card mb10" shadow="never">
			<el-form ref="searchFormRef" class="search-form" :inline="true" label-position="left" label-width="75px" :model="searchForm">
				<el-row :gutter="30" justify="start">
					<el-col :span="6">
						<el-form-item class="form-item" label="操作模块:" prop="title">
							<el-input v-model="searchForm.title" placeholder="请输入操作模块" />
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item class="form-item" label="业务类型:" prop="businessType">
							<dict-select v-model="searchForm.businessType" :dictKey="'sys_oper_type'" clearable placeholder="请选择业务类型" />
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item class="form-item" label="请求方法:" prop="method">
							<el-input v-model="searchForm.method" placeholder="请输入请求方法" />
						</el-form-item>
					</el-col>
					<template v-if="!searchMore">
						<el-col :span="6">
							<el-form-item class="form-item" label="操作人员:" prop="operName">
								<el-input v-model="searchForm.operName" placeholder="请输入操作人员" />
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item class="form-item" label="操作地址:" prop="operIp">
								<el-input v-model="searchForm.operIp" placeholder="请输入操作地址" />
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item class="form-item" label="请求参数:" prop="operParam">
								<el-input v-model="searchForm.operParam" placeholder="请输入请求参数" />
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item class="form-item" label="操作状态:" prop="status">
								<el-select v-model="searchForm.status" class="el-form-item" clearable placeholder="请选择状态">
									<el-option label="正常" value="0" />
									<el-option label="异常" value="1" />
								</el-select>
							</el-form-item>
						</el-col>
					</template>
					<el-col :span="6">
						<div class="search-btn">
							<el-button type="primary" @click="handleSearch">查询</el-button>
							<el-button @click="handleReset">重置</el-button>
							<a class="more-search" @click="searchMore = searchMore ? false : true">
								{{ searchMore ? '展开' : '收起' }}
								<el-icon>
									<component :is="searchMore ? 'ele-ArrowDown' : 'ele-ArrowUp'" color="#0052CC" />
								</el-icon>
							</a>
						</div>
					</el-col>
				</el-row>
			</el-form>
		</el-card>
		<!-- 响应参数 -->
		<el-card class="box-card" shadow="never">
			<static-table :tableData="tableData" rowId="Id" :loading="loading" :seqConfig="{ startIndex: (pageNum - 1) * pageSize }" @on-selection-change="handleSelectionChange">
				<template #vux-search>
					<div class="vxe-action">
						<el-row :gutter="12" class="mb10">
							<el-button class="ml6" v-has="'system:log:clear'" type="warning" @click="handleClear()">批量删除</el-button>
						</el-row>
					</div>
				</template>
				<template #vux-column>
					<vxe-column field="selection" fixed="left" type="checkbox" width="60" />
					<vxe-column type="seq" title="序号" width="60" />
					<vxe-column field="title" min-width="120" show-overflow="tooltip" title="	操作模块" />
					<vxe-column field="businessType" :formatter="formatterType" min-width="120" title="业务类型" />
					<vxe-column field="method" min-width="120" show-overflow="tooltip" title="请求方法" />
					<vxe-column field="requestMethod" min-width="120" show-overflow="tooltip" title="请求方式" />
					<vxe-column field="operatorType" min-width="120" title="操作类别">
						<template #default="{ row }">
							<span>{{ row.operatorType == '0' ? '其它' : row.operatorType == '1' ? '后台用户' : '手机端用户' }}</span>
						</template>
					</vxe-column>
					<vxe-column field="operName" min-width="120" show-overflow="tooltip" title="操作人员" />
					<vxe-column field="deptName" min-width="120" show-overflow="tooltip" title="	部门名称" />
					<vxe-column field="operUrl" min-width="120" show-overflow="tooltip" title="请求url" />
					<vxe-column field="operIp" min-width="120" show-overflow="tooltip" title="操作地址" />
					<vxe-column field="operLocation" min-width="120" show-overflow="tooltip" title="操作地点" />
					<vxe-column field="operParam" min-width="120" show-overflow="tooltip" title="请求参数" />
					<vxe-column field="jsonResult" min-width="120" show-overflow="tooltip" title="返回参数" />
					<vxe-column field="status" min-width="120" title="操作状态">
						<template #default="{ row }">
							<span>{{ row.status == '0' ? '正常' : '异常' }}</span>
						</template>
					</vxe-column>
					<vxe-column field="errorMsg" min-width="120" show-overflow="tooltip" title="错误消息" />
					<vxe-column field="operTime" min-width="120" show-overflow="tooltip" title="操作时间" />

					<vxe-column field="params" fixed="right" min-width="120" title="操作">
						<template #default="{ row }">
							<div class="vxe-action">
								<a @click="handleDelete(row)" v-has="'system:log:clear'">删除</a>
							</div>
						</template>
					</vxe-column>
				</template>
			</static-table>
			<el-pagination background :current-page="pageNum" :layout="layout" :page-size="pageSize" :total="dataCount" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
		</el-card>
	</div>
</template>
<script name="OperManage" setup>
import useTableList from '@/hooks/useTableList'
import global from '@/utils/global'
const state = reactive({
	searchForm: {
		title: '',
		businessType: '',
		method: '',
		operName: '',
		operIp: '',
		operParam: '',
		status: '',
		beginTime: '',
		endTime: '',
	},
	createTimeAry: [],
	searchFormRef: null,
	selectionAry: [],
})
const queryUrl = '/meta-system/web/v1/operLog/list'
const { searchForm, searchFormRef } = toRefs(state)
const { searchMore, loading, dataCount, handleInitQuery, getDictKeyText, getTimeParseAry, handleModalOk, tableData, pageNum, pageSize, layout, handleSizeChange, handleCurrentChange } = useTableList(queryUrl, state.searchForm)
const handleSearch = () => {
	const { beginTime, endTime } = getTimeParseAry(state.createTimeAry)
	state.searchForm.beginTime = beginTime
	state.searchForm.endTime = endTime
	handleInitQuery()
}
const handleReset = () => {
	state.searchFormRef.resetFields()
	state.createTimeAry = []
	handleSearch()
}
const handleDelete = row => {
	global.$baseConfirm(
		'是否确认删除当前选中的数据？',
		'提示',
		() => {
			global.$fetchPostData(`/meta-system/web/v1/operLog/remove`, { removeIdList: [row.id] }).then(data => {
				if (data.code == 200) {
					global.$baseMessage(data.msg, 'success')
					handleModalOk(2)
				} else {
					global.$baseMessage(data.msg, 'error')
				}
			})
		},
		() => {}
	)
}
// 批量删除

const handleSelectionChange = records => {
	console.log(records)
	const ids = records.map(record => record.id)
	state.selectionAry = ids
	console.log(state.selectionAry)
}
const handleClear = () => {
	if (state.selectionAry.length === 0) {
		global.$baseMessage('请选择要删除的数据', 'warning')
		return
	}
	global.$baseConfirm(
		'是否确认批量删除选中的数据？',
		'提示',
		() => {
			global.$fetchPostData(`/meta-system/web/v1/operLog/remove`, { removeIdList: state.selectionAry }).then(data => {
				if (data.code === 200) {
					global.$baseMessage(data.msg, 'success')
					handleModalOk(2)
				} else {
					global.$baseMessage(data.msg, 'error')
				}
			})
		},
		() => {}
	)
}
const formatterType = ({ cellValue }) => {
	return getDictKeyText('sys_oper_type', cellValue)
}
</script>
<style lang="scss" scoped></style>
